<template>
	<view class="wrap flex column align-center">
		<image class="logo" mode="widthFix" :src="$getImageURL(logo)" />

		<view class="title fBold f-60">欢迎进入百焕商圈</view>

		<view class="desc f-24 flex column">
			<view>为您提供优质服务,百焕商圈需要获取以下信息</view>
			<view>您的公开信息（昵称、头像）</view>
		</view>

		<button
			class="login-btn theme-gradient-btn f-32"
			:open-type="isAgree ? 'getPhoneNumber' : ''"
			@getphonenumber="onLogin"
			@click="onCheck()"
			:loading="loading"
			:disabled="disabled"
		>
			快捷登录
		</button>

		<view class="agree-bg flex align-center">
			<view class="choose" @click="isAgree = !isAgree">
				<image v-if="isAgree" :src="$staticImagePath('common/choose_select.png')" />

				<image v-else :src="$staticImagePath('common/choose_normal.png')" />
			</view>

			<view class="agree-title f-24 flex align-center">
				<view>阅读并同意</view>
				<view class="agree" @click="$jump.goHTMLWeb('用户协议', 'user_agreement')">《用户协议》</view>
				<view>和</view>
				<view class="agree" @click="$jump.goHTMLWeb('隐私政策', 'privacy_protection')">《隐私政策》</view>
			</view>
		</view>

		<loginDisable :isShow.sync="isShowDisabled" />
	</view>
</template>

<script>
	import { phoneLogin } from "@/API/login.js";
	import loginDisable from "./loginDisable.vue";
	import Location from "@/utils/location.js";
	export default {
		components: {
			loginDisable,
		},
		data() {
			return {
				from: "", //来自哪里
				loading: false,
				disabled: false,
				logo: "",
				code: "",
				isAgree: false,
				isShowDisabled: false,
			};
		},
		onLoad(options) {
			if (options.from) {
				this.from = options.from;
			}
			Location.getLocation((obj) => {
				this.$stoarge.setChangeCity(obj);
			});
			this.logo = this.$stoarge.getConfigData().logo2;
		},
		onUnload() {},
		methods: {
			/**
			 * 协议
			 */
			onCheck() {
				if (!this.isAgree) {
					this.$st.show("请阅读并同意《用户协议》和《隐私政策》");
					return;
				} else {
					wx.login({
						success: (loginRes) => {
							this.code = loginRes.code;
						},
					});
					this.disabled = true;
					this.loading = true;
				}
			},
			/**
			 * 登录
			 */
			onLogin(e) {
				const locationInfo = this.$stoarge.getLocation();
				var city = "";
				if (locationInfo) {
					city = [locationInfo.province, locationInfo.city, locationInfo.district].join("/");
				}
				
				if (e.detail.errMsg === "getPhoneNumber:ok") {
					phoneLogin({
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						code: this.code,
						client_id: uni.getStorageSync("wanlshop:chat_client_id")
							? uni.getStorageSync("wanlshop:chat_client_id")
							: null,
						city: city,
					})
						.then((res) => {
							this.$stoarge.setUserInfo(res.data.userinfo);
							this.$stoarge.setToken(res.data.userinfo.token);
							this.$store.dispatch("user/login", res.data);
							this.$store.dispatch("cart/login");
							this.$store.dispatch("chat/get");

							if (this.$stoarge.pid !== "") {
								this.$commonNetwork.onBindHigher();
							}

							if (this.from == "request") {
								let prePage = this.$filters.prePageRoute();
								if (
									prePage.route == "pages/home/article/details" ||
									prePage.route == "pages/home/article/receiveResult"
								) {
									prePage.$vm.onLoginRefreshData();
								}
							}
							this.$st.success("登录成功", () => {
								uni.navigateBack();
							});
						})
						.catch((res) => {
							if (res.code === 402) {
								this.isShowDisabled = true;
							}
							this.disabled = false;
							this.loading = false;
						});
				} else {
					this.disabled = false;
					this.loading = false;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 150rpx 40rpx 0rpx;
		box-sizing: border-box;

		.logo {
			width: 280rpx;
			height: auto;
		}

		.title {
			margin-top: 50rpx;
			// width: 100%;
			color: #000000;
		}

		.desc {
			// width: 100%;
			margin-top: 50rpx;
			gap: 10rpx;
			color: #999999;
			text-align: center;
		}

		.login-btn {
			padding: 0rpx;
			margin: 0rpx;
			margin-top: 100rpx;
			animation: mymove 5s infinite;
			-webkit-animation: mymove 5s infinite;
			/*Safari and Chrome*/
			animation-direction: alternate;
			/*轮流反向播放动画。*/
			animation-timing-function: ease-in-out;
			/*动画的速度曲线*/
			/* Safari 和 Chrome */
			-webkit-animation: mymove 5s infinite;
			-webkit-animation-direction: alternate;
			/*轮流反向播放动画。*/
			-webkit-animation-timing-function: ease-in-out;
			/*动画的速度曲线*/
		}

		button[disabled] {
			color: white;
		}

		.agree-bg {
			margin-top: 50rpx;
			// width: 100%;
			overflow: hidden;
			gap: 8rpx;

			.choose {
				width: 35rpx;
				height: 35rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.agree-title {
				color: #666666;
			}

			.agree {
				color: $theme-color;
			}
		}
	}

	@keyframes mymove {
		0% {
			transform: scale(1);
			/*开始为原始大小*/
		}

		25% {
			transform: scale(1.1);
			/*放大1.1倍*/
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.1);
		}
	}
</style>
